<template>
	<view class="main-container">
		<view class="title-container">文阳烧烤坊 - 订单管理系统 - 定制APP</view>
		<view class="swiper-container">
			<swiper class="swiper-container" indicator-dots autoplay circular acceleration :interval="3000">
				<swiper-item v-for="(item,index) in swiperImg" :key="index">
					<img :src="item" class="swiper-img">
				</swiper-item>
			</swiper>
		</view>
		<view class="button-container">
			<view class="button" @click="toGoods">管理商品</view>
			<view class="button" @click="addTable">添加餐桌</view>
			<view class="button" @click="pay">营业信息</view>
		</view>
		<view class="describe-container">
			<view>餐桌信息</view>
			<view class="money-container">
				<span class="red">红色</span>未付款、
				<span class="green">绿色</span>已付款、
				<span class="blue">紫色</span>有未交付
			</view>
		</view>
		<view class="table-container">
			<view :class="'table ' + (item.status?'green':'red')" v-for="(item,index) in tables" :key="index"
				@click="showMenu(index)">
				<view class="table-title">{{ item.name }}</view>
				<view class="table-end" v-show="item.end"></view>
				<view class="table-money">{{ item.money }}元</view>
			</view>
		</view>

		<!-- 餐桌菜单 -->
		<uni-popup ref="tableMenu" v-if="tables[menuIndex]">
			<view class="model-container">
				<view class="tableMenu-title">{{ tables[menuIndex].name }}</view>
				<view class="tableMenubutton-container">
					<view @click="swichBut('append')">继续点餐</view>
					<view @click="swichBut('detail')">订单信息</view>
					<view @click="swichBut('rename')">餐桌命名</view>
					<view @click="swichBut('delete')"><span class="delete-color">删除餐桌</span></view>
					<view @click="hideTableMenu">取消菜单</view>
				</view>
			</view>
		</uni-popup>

		<!-- 重命名 -->
		<uni-popup ref="renameTable" v-if="tables[menuIndex]">
			<view class="model-container">
				<view class="rename-container">
					<view>修改名称</view>
					<input type="text" v-model="tables[menuIndex].name" maxlength="10" />
					<view @click="saveRenameModel">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tables: [],
				swiperImg: [
					"/static/img/1.jpg",
					"/static/img/2.jpg",
					"/static/img/3.jpg",
					"/static/img/4.jpg",
				],
				menuIndex: 0,
				oldName: ''
			}
		},
		onShow() {
			this.getTables()
		},
		methods: {
			// 跳转到商品管理页面
			toGoods() {
				uni.navigateTo({
					url: "/pages/goods/goods"
				})
			},
			// 添加餐桌
			addTable() {
				uni.navigateTo({
					url: "/pages/table-add/table-add"
				})
			},
			// 营业信息
			pay() {
				uni.navigateTo({
					url: "/pages/business/business"
				})
			},
			// 获取餐桌信息
			getTables() {
				uni.showLoading({
					'title': "获取餐桌信息中...",
					'mask': true
				})
				let tables = []
				uni.getStorageInfoSync().keys.find((item) => {
					try {
						var table = JSON.parse(this.$common.getStorage(item))
						if (table.name) {
							table.order.forEach((item, index) => {
								item.forEach((item, index) => {
									if (item.status != 3) {
										table.end = true
									}
								})
							})
							tables = tables.concat(table)
						}
					} catch {}
				})
				tables.sort(function(a, b) {
					return a.startTime < b.startTime ? -1 : 1
				})
				this.tables = tables
				uni.hideLoading()
			},
			// 显示餐桌菜单
			showMenu(index) {
				this.menuIndex = index
				this.$refs['tableMenu'].open()
			},
			// 隐藏餐桌菜单
			hideTableMenu() {
				this.$refs['tableMenu'].close()
			},
			// 确定餐桌命名
			saveRenameModel() {
				if (this.tables[this.menuIndex].name != this.oldName) {
					if (!uni.getStorageSync(this.tables[this.menuIndex].name)) {
						delete this.tables[this.menuIndex].end
						uni.setStorageSync(this.tables[this.menuIndex].name, JSON.stringify(this.tables[this.menuIndex]))
						uni.removeStorageSync(this.oldName)
						this.getTables()
					} else {
						uni.showToast({
							icon: "none",
							title: "桌号重复！请更换桌号！"
						})
						this.tables[this.menuIndex].name = this.oldName
					}
				}
				this.$refs['renameTable'].close()
			},
			// 餐桌操作
			swichBut(type) {
				switch (type) {
					case 'append':
						uni.navigateTo({
							url: "/pages/table-append/table-append?name=" + this.tables[this.menuIndex].name
						})
						break;
					case 'detail':
						uni.navigateTo({
							url: "/pages/table-detail/table-detail?name=" + this.tables[this.menuIndex].name
						})
						break;
					case 'rename':
						this.oldName = this.tables[this.menuIndex].name
						this.$refs['renameTable'].open()
						break;
					case 'delete':
						uni.showModal({
							'title': "提示",
							'content': "是否删除此餐桌信息",
							success: (res) => {
								if (res.confirm) {
									uni.removeStorageSync(this.tables[this.menuIndex].name)
									uni.showToast({
										'title': "删除成功~~"
									})
									this.getTables()
								}
							}
						})
						break;
				}
				this.hideTableMenu()
			}
		}
	}
</script>

<style>
	.main-container {
		width: 100%;
	}

	.title-container {
		width: 100%;
		font-size: 20px;
		text-align: center;
		background-color: #4f4745;
		color: white;
		padding: 10px 0;
	}

	.swiper-container {
		width: 100%;
		height: 200px;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.describe-container {
		text-align: center;
		color: #007AFF;
		font-size: 20px;
		font-weight: 800;
		padding: 15px 0;
		border-bottom: 2px solid #b9b9b9;
		margin-bottom: 10px;
	}

	.money-container {
		color: #050055;
		font-size: 14px;
		font-weight: normal;
	}

	.table-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, 180px);
		justify-content: center;
		align-items: center;
		justify-items: center;
	}

	.table {
		width: 150px;
		height: 150px;
		margin: 15px 0;
		display: flex;
		color: white;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		text-align: center;
		position: relative;
	}

	.table-title {
		font-size: 20px;
		padding-bottom: 10px;
	}

	.table-end {
		position: absolute;
		top: 0px;
		right: 0px;
		background-color: #5500ff;
		width: 30px;
		height: 30px;
	}

	.table-money {
		font-size: 20px;
	}

	.red {
		background-color: #d91539;
	}

	.green {
		background-color: #5ebe04;
	}

	.blue {
		background-color: #5500ff;
	}

	.model-container {
		width: 200px;
		background-color: white;
		border-radius: 10px;
	}

	.tableMenu-title {
		text-align: center;
		font-size: 20px;
		padding: 10px 0;
		border-bottom: 1px solid #333333;
		box-sizing: border-box;
	}

	.tableMenubutton-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tableMenubutton-container view {
		padding: 15px 0;
		width: 100%;
		transition: 0.3s;
	}

	.tableMenubutton-container view:hover {
		background-color: #b1b1b1;
	}

	.delete-color {
		color: red;
	}

	.rename-container {
		text-align: center;
	}

	.rename-container view {
		padding: 10px 0;
		width: 100%;
		transition: 0.3s;
		border-top: 1px solid #a8a8a8;
		box-sizing: content-box;
	}

	.rename-container input {
		padding: 10px 0;
		width: 100%;
		transition: 0.3s;
		border-top: 1px solid #a8a8a8;
		box-sizing: content-box;
	}
</style>
